@charset "UTF-8";
@import "./_kit/variables.scss";
@import "./_kit/_mixin.scss";

@include fontface('iconfont','../assets/fonts/iconfont');

.icon,
[class*="icon-"]{
    font-family:'iconfont';
    font-size:$rem*32;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.icon-like{
    font-family:'iconfont';
    font-size:$rem*32;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.icon-like:before { content: "\e600"; }

.is-liked{
    color:red;
}

.student-container{
    background: url("../assets/images/background.png") no-repeat;
    background-size: cover;
    //position: absolute;
    width: 100%;
    height: 100%;
    min-height: 100vh;
}
.student-stories-wrap{
    .stories-list{
        padding:$rem*10 $rem*20 $rem*10;
        &>li{
            background-color: rgba(253,255,254,.9);
            padding: $rem*30;
            border-radius: $rem*10;
            margin: $rem*20 0;
        }
    }
    .stories-item{
        .stories-list__info{
            padding-bottom: $rem*10;
            .portrait{
                display: inline-block;
                width:$rem*36;
                height:$rem*36;
                vertical-align: top;
                margin-right: $rem*17;
                background-size: cover;
                border-radius: 50%;
                margin-top:$rem*3;
            }
            .info-detail{
                display: inline-block;
                line-height: 1;
            }
            span{
                font-size: $rem*20;
                color:#999;
            }
            .nickname{
                font-size: $rem*28;
                color: #10b8cc;
            }
        }
        h3{
            font-size: $rem*30;
            color: #333;
            padding-bottom: $rem*14;
        }
        img{
            width: 100%;
            height: $rem*202;
            background-size: cover;
        }
        .content {
            word-wrap: break-word;
            @include textOverFlow(4);
            color:#666;
            font-size: $rem*26;
            p {
                font-size: $rem*26;
                color: #666;
                padding-top: $rem*16;
                line-height: $rem*37;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
            }
        }
        .edit-info{
            color:#999;
            font-size: $rem*24;
            text-align: right;
            margin-top: $rem*10;
            .pull-left{
                margin-top: -$rem*5;
            }
        }
        .below_box{
            @include clearfix;
            margin-top: $rem*30;
            .reader-content{
                display: inline-block;
                .reader-icon{
                    background: url(../assets/images/reading_counts.png) no-repeat;
                    width: $rem*32;
                    height: $rem*32;
                    background-size: 100% 100%;
                    display: inline-block;
                    vertical-align:-$rem*6;
                    margin-right: $rem*10;
                }
            }
            .like-content{
                float: right;
                .like-icon{
                    background: url(../assets/images/before_like.png) no-repeat;
                    width: $rem*32;
                    height: $rem*32;
                    background-size: 100% 100%;
                    display: inline-block;
                    vertical-align:-$rem*6;
                    margin-right: $rem*10;
                }
            }
        }
        .bottom-tools{
            text-align: right;
            color:#333;
        }
    }
}
.student-essay-wrap{
    .stories-list {
        &>li,
        .stories-item{
            @include clearfix;
            .stories-list__info{

            }
            .info-detail{
                display: inline-block;
                line-height: 1;
                span{
                    vertical-align: $rem*16;
                }
                .time{
                    font-size: $rem*20;
                    color: #999;
                    display: block;
                }
            }
            h3 {
                font-size: $rem*36;
                color: #333;
                line-height: $rem*50;
            }
            .story-content{
                padding-bottom: $rem*30;
                font-size: $rem*26;
                color: #666;
            }
            &__info{

            }
            .edit-info{
                font-size: $rem*30;
                color: #999;
                float: right;
                padding-top: $rem*60;
                padding-bottom: $rem*20;
            }
        }
    }
}

.stories-detail-wrap{
    padding:$rem*30 $rem*20;
    .stories-item{
        background-color: rgba(253,255,254,.9);
        border-radius: $rem*8;
        padding: $rem*30;
        h3{
            color: #333;
            font-size: $rem*36;
        }
    }
}

